<template>
	<view class="box">
		<view class="box_1">
			<view class="box_2">
				<image src="../../static/11.png" mode="" class="img_1"></image>
				<image src="../../static/12.png" mode="" class="img_2"></image>
				<image src="../../static/13.png" mode="" class="img_2"></image>
			</view>
			<view class="box_3">
				<view class="box_9">
					<view class="box_4">
					
				</view>
				<view class="box_5">
					<view class="box_7">
						郑嘉豪
					</view>
					<view class="box_8">
						<image src="../../static/14.png" mode="" class="img_3"></image>
						<text class="html_1">高级认证</text>
					</view>
				</view>
				</view>
				
				<view class="box_6">
					<image src="../../static/15.png" mode="" class="img_4"></image>
					<text>切换长辈版</text>
				</view>
			</view>
		</view>
		<view class="box_10">
			<view class="box_12">
				<view class="box_16">
					<image src="../../static/16.png" mode="" class="img_5"></image>
				</view>
				<view class="box_17">
					我的办件
				</view>
			</view>
			<view class="box_12">
				<view class="box_16">
					<image src="../../static/17.png" mode="" class="img_5"></image>
				</view>
				<view class="box_17">
					权益积分
				</view>
			</view>
			<view class="box_12">
				<view class="box_16">
					<image src="../../static/18.png" mode="" class="img_5"></image>
				</view>
				<view class="box_17">
					优惠券
				</view>
			</view>
			<view class="box_12">
				<view class="box_16">
					<image src="../../static/19.png" mode="" class="img_5"></image>
				</view>
				<view class="box_17">
					我的钱包
				</view>
			</view>
		</view>
		<view class="box_11">
			<view class="box_18">
				个人中心
			</view>
			<view class="box_19">
				<view class="box_29">
					<scroll-view  scroll-x="true" style="height: 180rpx;white-space: nowrap;" scroll-with-animation="true" :scroll-into-view="'scroll'+scrollId">
					  <view class="">
					  	<image src="../../static/32.png" mode="" class="img_7"></image>
						<image src="../../static/33.png" mode="" class="img_8"></image>
						<image src="../../static/34.png" mode="" class="img_9"></image>
					  </view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="box_20">
			<view class="box_21">
				我的服务
			</view>
			<view class="box_22">
				<view class="box_26">
					<view class="box_23">
						<view class="box_24">
							<image src="../../static/20.png" mode="" class="img_6"></image>
						</view>
						<view class="box_25">
							电子证照
						</view>
					</view>
					<view class="box_23">
						<view class="box_24">
							<image src="../../static/21.png" mode="" class="img_6"></image>
						</view>
						<view class="box_25">
							亲情账号
						</view>
					</view>
					<view class="box_23">
						<view class="box_24">
							<image src="../../static/22.png" mode="" class="img_6"></image>
						</view>
						<view class="box_25">
							文明出行
						</view>
					</view>
					<view class="box_23">
						<view class="box_24">
							<image src="../../static/23.png" mode="" class="img_6"></image>
						</view>
						<view class="box_25">
							智慧停车
						</view>
					</view>
				</view>
				<view class="box_26">
					<view class="box_23">
						<view class="box_24">
							<image src="../../static/20.png" mode="" class="img_6"></image>
						</view>
						<view class="box_25">
							电子证照
						</view>
					</view>
					<view class="box_23">
						<view class="box_24">
							<image src="../../static/21.png" mode="" class="img_6"></image>
						</view>
						<view class="box_25">
							亲情账号
						</view>
					</view>
					<view class="box_23">
						<view class="box_24">
							<image src="../../static/22.png" mode="" class="img_6"></image>
						</view>
						<view class="box_25">
							文明出行
						</view>
					</view>
					<view class="box_23">
						<view class="box_24">
							<image src="../../static/23.png" mode="" class="img_6"></image>
						</view>
						<view class="box_25">
							智慧停车
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box_27">
			<view class="box_21">
				法人服务
			</view>
			<view class="box_28">
				<view class="box_23">
					<view class="box_24">
						<image src="../../static/24.png" mode="" class="img_6"></image>
					</view>
					<view class="box_25">
						绑定企业
					</view>
			</view>
			<view class="box_23">
					<view class="box_24">
						<image src="../../static/25.png" mode="" class="img_6"></image>
					</view>
					<view class="box_25">
						我是经...
					</view>
			</view>
			<view class="box_23">
					<view class="box_24">
						<image src="../../static/26.png" mode="" class="img_6"></image>
					</view>
					<view class="box_25">
						营业执照
					</view>
			</view>
			<view class="box_23">
					<view class="box_24">
						<image src="../../static/27.png" mode="" class="img_6"></image>
					</view>
					<view class="box_25">
						电子印章
					</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			
			}
		}
	}
</script>

<style>
	.uni-image>img{
		height: 180rpx;
	}
	.img_7{
		width: 47%;
		height: 180rpx;
		
	}
	.img_8{
		width: 47%;
		height: 180rpx;
		margin-left: 10rpx;
	}
	.img_9{
		width: 47%;
		height: 180rpx;
		margin-left: 10rpx;
	}
	.box_29{
		width: 96%;
		height: 180rpx;
	}
	.box_28{
		display: flex;
		flex-direction: row;
		justify-content:  space-between;
		margin: 30rpx;
	}
	.box_27{
		width: 94%;
		height: 250rpx;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	.box_25{
		margin-top: 5rpx;
	}
	.box_22{
		display: flex;
		flex-direction: column;
	}
	.box_23{
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}
	.box_26{
		display: flex;
		flex-direction: row;
		justify-content:  space-between;
	margin-left: 30rpx;
	margin-right: 30rpx;
	margin-top: 15rpx;
	margin-bottom: 15rpx;
	}
	.img_6{
		width: 60rpx;
		height: 60rpx;
	}
	.box_21{
		font-size: 35rpx;
		font-weight: 600;
		margin: 30rpx;
		margin-bottom: 20rpx;
	}
	.box_20{
		width: 94%;
		height: 400rpx;
		background: #fff;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
	.box_19{
		margin: 30rpx;
		display: flex;
		justify-content: center;
	}
	.box_18{
	margin: 30rpx;
	margin-bottom: 0rpx;
	font-weight: 600;
	font-size: 35rpx;
	}
	.box_11{
		width: 94%;
		background: #fff;
		height: 320rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.box_17{
		margin-top: 5%;
	}
	.img_5{
		width: 70rpx;
		height: 70rpx;
	}
	.box_12{
		display: flex;
		flex-direction: column;
		align-items: center;
		
		width: 25%;
		margin-top: 6%;
	}
	.box_10{
		width: 94%;
		background: #fff;
		height: 200rpx;
		border-radius: 10rpx;
		margin-top: -6%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.box_9{
		width: 55%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.box_6{
		color: #fff;
		margin-right: 2%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 35rpx;
		border: 1px solid #fff;
		border-radius: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		width: 33%;
		margin-top: 10%;
	}
	.img_4{
		width: 40rpx;
		height: 40rpx;
		margin-top: 10rpx;
	}
	.img_3{
		width: 40rpx;
		height: 45rpx;
		
	}
	.img_1{
	width: 50rpx;
	height: 50rpx;
	margin-right: 10rpx;
	
	}
	.img_2{
		width: 50rpx;
		height: 50rpx;
margin-left: 10rpx;
margin-right: 10rpx;
	
	}
	.box{
		
		background: #f5f3f4;
		width: 750rpx;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.box_1{
		width: 100%;
		height: 400rpx;
		background: #409efe;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.box_2{
		display: flex;
		flex-direction: row;
		width: 94%;
		margin-top: 50rpx;
		justify-content:flex-end;
	}
	.box_3{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 94%;
		margin-top: 6%;
	}
	.box_4{
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		background: #fff;
        
	}
	.box_5{
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between ;
		
	}
	.box_7{
		font-size: 50rpx;
		font-weight: 600;
	}
	.box_8{
		display: flex;
		flex-direction: row;
	}
	.html_1{
		
		margin-left: 20rpx;
	}
</style>